<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <div class="card height">
        <div>
          <div class="card-num">412</div>
          <div class="card-title">
            <span class="card-name">计划任务</span>/
            <span class="card-year">{{params.selectDate}}</span>
          </div>
        </div>
        <div>
          <svg t="1724730469958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8456" width="64" height="64"><path d="M512 32.512a479.488 479.488 0 1 1 0 958.976A479.488 479.488 0 0 1 512 32.512z m0 64a415.488 415.488 0 1 0 0 830.976A415.488 415.488 0 0 0 512 96.512z" fill="#1f69e0" p-id="8457"></path><path d="M704.576 718.656c0 15.36-10.24 25.6-25.6 25.6H345.088c-10.24 0-20.48-5.12-23.104-15.36a23.488 23.488 0 0 1 5.12-28.16L496.448 518.4 327.232 325.888c-7.68-7.68-7.68-20.48-5.12-30.784 5.12-10.24 12.864-15.36 23.168-15.36h331.072c12.8 0 25.6 12.8 25.6 25.6v66.752c0 15.36-10.24 25.6-25.6 25.6-12.864 2.624-23.168-10.24-23.168-25.6v-38.528h-248.96L550.528 497.92c10.24 10.24 10.24 25.6 0 35.84l-143.68 156.736h246.4v-23.168c0-15.36 10.304-25.6 25.664-25.6 12.864 0 25.6 12.8 25.6 25.6v51.392z" fill="#1f69e0" p-id="8458"></path></svg>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="card height">
        <div>
          <div class="card-num">515</div>
          <div class="card-title">
            <span class="card-name">应急任务</span>/
            <span class="card-year">{{params.selectDate}}</span>
          </div>
        </div>
        <div>
          <svg t="1724730634933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13124" width="64" height="64"><path d="M968.907197 874.442409V477.000653c-0.450035-6.592405 0.583829-10.776515-1.046027-17.709487-12.12662-51.681051-102.802599-91.430092-211.102924-91.430092-19.704237 0-39.031417 1.301453-57.519343 3.83138-0.036489-66.459229 0.608155-133.052251 0.608155-199.414175 0-72.248869-144.497737-131.008849-322.127784-131.00885-177.715188 0-322.225089 58.759981-322.225088 130.996687v632.396536c0 72.248869 144.497737 131.008849 322.225088 131.008849 65.425364 0 128.393781-7.808716 182.312844-22.708525 32.049793 32.293055 110.599152 53.833921 196.81127 53.833921 119.19847 0 212.53817-38.350283 212.53817-87.282471-0.024326-1.763651-0.097305-3.928684-0.474361-5.072017zM756.746083 511.191153c-34.883797 0-116.413118-8.124957-147.027664-39.955813 30.468589-30.468589 105.283873-39.943651 147.015501-39.943651 41.841096 0 116.376629 9.304779 147.027664 39.943651-29.325256 30.59022-107.035361 39.955814-147.015501 39.955813zM607.650691 727.645844c44.200739 23.012603 99.798311 31.672736 148.803478 31.672737 51.072896 0 102.985046-8.781765 148.937272-31.757878v143.342242c-32.134934 24.837069-109.273373 32.366034-148.645358 32.366033-40.466664 0-115.890104-7.480312-149.119719-32.670111l0.024327-142.953023z m148.645357-28.838731c-38.946276 0-105.259547-9.888608-138.902707-39.27468-5.972087-5.144995-9.195311-9.900771-9.19531-13.73215l-0.535177-100.710544c9.195311 4.366556 19.546116 8.514176 30.772666 12.272577 35.212201 11.263039 76.080248 17.259452 118.274074 17.259452 55.390799 0 109.054437-10.594068 148.645357-29.288767v102.157954c-8.514176 35.187875-117.848365 51.316158-149.058903 51.316158z m-212.075972-68.952666c-46.329283 16.712112-105.369015 25.931749-166.756227 25.931748-60.620936 0-253.953557-21.966575-258.624191-100.649728v-114.126454c71.421777 46.523893 175.501503 62.056183 258.709333 62.056183 59.368136 0 116.887479-7.58978 166.817043-21.930086l-0.145958 148.718337z m-425.441233 24.691111c71.300146 46.523893 175.64746 61.971041 258.709332 61.971042 59.368136 0 116.887479-7.58978 166.756227-21.930086v156.855456c-48.384848 13.647009-106.001497 20.871895-166.671085 20.871895-52.325696 0-232.558648-17.308104-258.782311-68.867524l-0.012163-148.900783z m258.940431-414.628229c-55.135374 0-220.115787-14.376795-257.943056-67.651213 38.094858-52.386511 197.723503-67.493093 257.91873-67.493093 56.984167 0 223.582273 15.909347 257.943057 67.493093-34.628372 52.727078-205.897112 67.651213-257.918731 67.651213zM118.851821 341.771205V250.803312c60.43849 32.974189 156.393258 52.544632 258.867453 52.544631 101.780898 0 197.504567-19.412322 258.076851-52.228391v90.530022c0 78.026345-205.897112 100.759197-258.320113 100.759197-55.475941 0-253.929231-21.686824-258.624191-100.637566z" fill="#13ce66" p-id="13125"></path></svg>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="card height">
        <div>
          <div class="card-num">3709</div>
          <div class="card-title">
            <span class="card-name">总采样数</span>/
            <span class="card-year">{{params.selectDate}}</span>
          </div>
        </div>
        <div>
          <svg t="1724730717126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15037" width="64" height="64"><path d="M483 508c-59.3 0-115.05-23.09-156.98-65.02C284.09 401.05 261 345.3 261 286s23.09-115.05 65.02-156.98C367.95 87.09 423.7 64 483 64s115.05 23.09 156.98 65.02C681.91 170.95 705 226.7 705 286s-23.09 115.05-65.02 156.98C598.05 484.91 542.3 508 483 508z m0-380c-87.12 0-158 70.88-158 158s70.88 158 158 158 158-70.88 158-158-70.88-158-158-158zM896.24 960H63.78l0.24-32.24c0.42-56.17 11.71-110.64 33.55-161.89 21.11-49.53 51.13-93.98 89.25-132.12 38.15-38.17 82.51-68.14 131.87-89.07C369.82 522.99 424.09 512 480.01 512s110.19 10.99 161.32 32.68c49.35 20.93 93.72 50.9 131.87 89.07 38.12 38.14 68.15 82.59 89.25 132.12 21.84 51.25 33.13 105.72 33.55 161.89l0.24 32.24z m-766.53-64h700.6c-17.55-179.17-168.45-320-350.3-320s-332.74 140.83-350.3 320zM960 672h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96v64zM960 512H811c-17.6 0-32-14.4-32-32s14.4-32 32-32h149v64zM960 352H768c-17.6 0-32-14.4-32-32s14.4-32 32-32h192v64z" p-id="15038" fill="#fe866b"></path><path d="M480 895.54L375.56 772.11l104.45-196.22 104.42 196.22L480 895.54z m-27.56-131.65L480 796.46l27.56-32.57L480 712.11l-27.56 51.78z" p-id="15039" fill="#fe866b"></path></svg>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="card height">
        <div>
          <div class="card-num">3874</div>
          <div class="card-title">
            <span class="card-name">总检验数</span>/
            <span class="card-year">{{params.selectDate}}</span>
          </div>
        </div>
        <div>
          <svg t="1724730771211" class="icon" viewBox="0 0 1047 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18779" width="64" height="64"><path d="M1022.416719 203.225726c0.024087 0.1927 0.120437 0.385399 0.120437 0.578098 0 1.348897-0.554011 2.505094-0.770798 3.805816-0.264962 1.854733-0.385399 3.685378-1.108022 5.443761a25.725385 25.725385 0 0 1-23.870652 16.475809H684.999869a25.821735 25.821735 0 0 1-25.749473-25.725386c0-14.115239 11.586058-25.701298 25.749473-25.701297h238.321125L873.411819 136.094032a24.569188 24.569188 0 0 1-2.143782-36.323858c10.164899-10.429861 27.74873-11.176572 39.093914-1.637946l101.40812 85.365885c5.299237 3.902165 8.84009 9.562713 9.948112 16.283109 0.216787 1.156197 0.674448 2.264219 0.698536 3.444504zM653.782547 555.889926c12.910867 0 23.485253 10.550298 23.485254 23.461166a23.533428 23.533428 0 0 1-23.485254 23.437078h-128.097002v92.351243c0 14.067065-11.537883 25.580861-25.629036 25.58086a25.67721 25.67721 0 0 1-25.629035-25.58086v-92.351243h-122.580979a23.533428 23.533428 0 0 1-23.509341-23.437078c0-12.910867 10.574386-23.461166 23.509341-23.461166h122.580979v-73.876177h-126.772194a23.533428 23.533428 0 0 1-23.485253-23.437078c0-12.910867 10.574386-23.461166 23.485253-23.461166h116.775906l-98.30084-94.808162a23.099854 23.099854 0 0 1-0.529923-32.710742 23.196204 23.196204 0 0 1 32.783005-0.554011l100.155572 96.614719 100.155573-96.614719a23.196204 23.196204 0 0 1 32.783005 0.554011c8.912353 9.177314 8.671478 23.822478-0.529923 32.710742l-98.30084 94.808162h116.944518c12.934955 0 23.509341 10.550298 23.509341 23.461166a23.533428 23.533428 0 0 1-23.509341 23.437078h-123.905788v73.876177h128.097002z m-21.534171-463.827733a434.97098 434.97098 0 0 0-125.326947-18.330541c-239.043748 0-433.525734 194.024324-433.525733 432.514061 0 238.46565 194.481985 432.489974 433.525733 432.489974 239.043748 0 433.525734-194.024324 433.525734-432.489974 0-50.029612-8.478779-99.047551-25.195462-145.656746a30.904185 30.904185 0 1 1 58.243429-20.78746 492.106386 492.106386 0 0 1 28.78449 166.444206c0 272.501202-222.206628 494.177906-495.358191 494.177906C233.769867 1000.423619 11.563239 778.746915 11.563239 506.245713 11.563239 233.744512 233.769867 12.04372 506.921429 12.04372c48.752977 0 96.927856 7.05762 143.17574 20.956072a30.831922 30.831922 0 1 1-17.848793 59.062401z" fill="#458bfa" p-id="18780"></path></svg>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import moment from 'moment'

export default {
  name: "header_index",
  data() {
    return {
      count: {
        applyMoney: '',
        orderMoney: '',
        purchaseMoney: ''
      },
      dateTime: {
        year: ''
      },
      params: {
        selectDate: '',
        dateScope: 5,
      }
    }
  },
  props: {
    date: ''
  },
  created() {
    this.params.selectDate = moment().format('YYYY-MM')
  },
  watch: {
    date(newVal, oldVal) {
      this.params.selectDate = newVal
      console.log(newVal)
      this.indexOrder()
    }
  },
  mounted() {
    this.indexOrder()
    this.dateTime.year = new Date().getFullYear()
  },
  methods: {
    indexOrder() {
      // indexOrder(this.params).then(res => {
      //   for(let i in this.count) {
      //     this.count[i] = res.data[i]
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.height {
  height: 120px;
}
.card-2 {
  padding: 10px 30px;
  background-color: #fff;
  margin-bottom: 10px;
  .card-2-title {
    padding-bottom: 10px;
    font-size: 14px;
    color: #999;
  }
}
.card {
  padding: 10px 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .card-num {
    font-size: 24px;
    padding-bottom: 5px;
  }
  .card-title {
    font-size: 14px;
    color: #999;
    .card-year {
      padding-left: 2px;
    }
    .card-name {
      padding-right: 5px;
      color: #333;
    }
  }
}
</style>
